<!--
* Created by Sean on 2017/11/23.
* My Credit Points
-->
<template>
  <div id="myCredit" class="my-credit">
    <box class="canvas-conter">
      <!--<div class="min-num">{{minNum}}分</div>-->
      <div id="Mydot" class="myCanvas-dot"><div>{{score}}分</div></div>
      <!--<div class="max-num">{{maxNum}}分</div>-->
    </box>
    <div class="credit-conter">
      <div class="credit-txt">
        <p>已授权腾讯信用，分数{{limit}}满650分</p>
        <p>{{creditTxt}}</p>
      </div>
      <div class="credit-btn">
        <x-button type="primary" @click.native="goto">了解腾讯信用分</x-button>
        <x-button type="primary" class="credit-btn-active" @click.native="goto2">查看房源</x-button>
      </div>
      <div class="update-time">更新时间：{{time}}</div>
    </div>
  </div>
</template>
<style lang="less">
  #app{
    height: 100vh;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
  }
  .my-credit {
    position: relative;
    min-height: 100%;
    background: -webkit-gradient(linear, 0 0.5, 0 bottom, from(#041F59), to(#1E88F4));
    .canvas-conter {
      position: relative;
      height: 17rem;
      background: url("../../images/user/icon_curve.png") no-repeat 0 2rem;
      background-size: cover;
      background-position-x: 50%;
      .min-num,.max-num{
        position: absolute;
        color: #7E93B2;
        font-size: 0.7rem;
      }
      .min-num{
        top: 11rem;
        left: 0.8rem;
      }
      .max-num{
        top: 1.5rem;
        right: 1rem;
      }
      .myCanvas-dot {
        position: absolute;
        width: 0.8rem;
        height: 0.8rem;
        background-color: #fff;
        border-radius: 0.4rem;
        top: 8.35rem;
        left: 11.4rem;
        box-shadow: 0px 0px 10px 10px rgba(252, 255, 255, 0.1);
        div {
          top: -4rem;
          left: -2.6rem;
          position: absolute;
          width: 4.5rem;
          color: #fff;
          text-align: center;
          background-color: #3A5C92;
          padding-bottom: 0.2rem;
          padding-top: 0.2rem;
          border-radius: 0.2rem;
          font-size: 1rem;
        }
        div:after {
          content: '';
          position: absolute;
          bottom: -0.7rem;
          right: 1rem;
          display: block;
          width: 0;
          height: 0;
          border-left: 0.5rem solid transparent;
          border-right: 0.5rem solid transparent;
          border-top: 1rem solid #3A5C92;
        }
      }
    }
    .credit-conter {
      position: relative;
      margin-top: 2rem;
      .credit-txt{
        width: 11.75rem;
        margin: 0 auto;
        p{
          color: #FFFFFF;
          font-weight: 400;
          font-size: 0.75rem;
          text-align: center;
        }
      }
      .credit-btn{
        text-align: center;
        margin-top: 1.5rem;
        button{
          display: inline-block;
          width: 7.5rem;
          border-radius: 1rem;
          border:1px solid #fff;
          height: 1.875rem;
          line-height: 1.875rem;
          font-size: 0.75rem;
          font-weight: 400;
        }
        button.credit-btn-active{
          background-color: #fff !important;
          color: #3B5892;
          margin-left: 0.5rem;
        }
      }
      .update-time{
        color: #C7D6F1;
        font-size: 0.6rem;
        text-align: center;
        margin-top: 2rem;
        padding-bottom: 1.5rem;
      }
    }
  }
</style>
<script>
  import { Countup } from 'vux'
  export default {
    name: 'myCredit',
    components: {
      Countup
    },
    data () {
      return {
        score: 0,
        limit: '',
        time: '',
        // minNum: 0,
        // maxNum: 0,
        creditTxt: '恭喜你，部分房源专享免押金'
      }
    },
    methods: {
      search () {
        let userInfo = localStorage.getItem('userInfo') // 获取本地数据
        userInfo = userInfo ? JSON.parse(userInfo) : {} // 解析本地数据比较
        this.score = 0
        this.$axiosPosting(this.$api.queryCreditScore, {
          idCard: userInfo.idCard || '',
          name: userInfo.trueName || ''
        }).then(json => {
          if (json.code === '0') {
            this.score = +JSON.parse(json.data || '{"data":[{"score":0}]}').data[0].score
            if (this.score < 650) {
              // if (this.score >= 0 && this.score <= 400) {
              //   this.minNum = 0
              //   this.maxNum = 500
              // } else if (this.score >= 401 && this.score < 650) {
              //   this.minNum = 300
              //   this.maxNum = 800
              // }
              this.limit = '未'
              this.creditTxt = '信用未达到，请继续努力'
            } else if (this.score > 650) {
              // if (this.score >= 650 && this.score <= 850) {
              //   this.minNum = 500
              //   this.maxNum = 1000
              // }
              this.limit = '已'
            }
            let myDate = new Date()
            let Year = myDate.getFullYear()
            let Month = myDate.getMonth() + 1
            let Datett = myDate.getDate()
            this.time = Year + '-' + Month + '-' + Datett
          } else {
            this.$vux.toast.text(json.msg)
          }
        })
      },
      goto () {
        window.location.href = 'https://kf.qq.com/touch/product/tengxunxinyong_app.html?code=003qjmkk1j0g6l0jK4mk1Tuokk1qjmkI&state=123'
      },
      goto2 () {
        this.$router.replace('/rentList')
      }
    },
    created () {
      let userInfo = localStorage.getItem('userInfo')
      userInfo = userInfo ? JSON.parse(userInfo) : {}
      if (userInfo.isCreditAuthorize !== 1) {
        this.$router.replace('/creditAccredit?from=myCredit')
      } else {
        this.search()
      }
    }
  }
</script>

